<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>scrollIntoView() - Focus-Scrolling behavior</title>
</head>
<style>
  .both-container,
  .vertical-container,
  .horizontal-container {
    box-sizing: border-box;
    width: 300px;
    margin: 0;
    padding: 0;
    border: 2px dashed blue;
    overflow: hidden;
    white-space: nowrap;
  }

  .filler,
  .first,
  .second,
  .third,
  .fourth {
    display: inline-block;
    box-sizing: border-box;
    width: 300px;
    padding: 5px;
    border: 1px solid red;
  }

  .both-container,
  .vertical-container {
    height: 30px;
  }

  .vertical-container > div {
    height: 30px;
    display: block;
  }

  .both-container > div {
    height: 30px;
  }

  .first {
    background: #CCFFFF;
  }
  .second {
    background: #FFCCFF;
  }
  .third {
    background: #FFFFCC;
  }
  .fourth {
    background: #CCFFCC;
  }
  .filler {
    background: #EEE;
  }

  div:focus {
    background: #AAA;
  }
</style>
<body>

  <h1>Scrolling behavior of <code>element.scrollIntoView()</code></h1>

  <!--
    https://developer.mozilla.org/en-US/docs/Web/API/Element.scrollIntoView
    https://dev.w3.org/csswg/cssom-view/#dom-element-scrollintoview
  -->

  <button type="button" data-type="needed-true"><code>Element.scrollIntoViewIfNeeded(true)</code></button>
  <button type="button" data-type="needed-false"><code>Element.scrollIntoViewIfNeeded(false)</code></button>
  <button type="button" data-type="true"><code>Element.scrollIntoView(true)</code></button>
  <button type="button" data-type="false"><code>Element.scrollIntoView(false)</code></button>

  <div style="height:100vh"></div>

  <h2>Vertical Scrolling</h2>

  <p>more than required space</p>
  <div class="vertical-container" style="height: 40px">
    <div class="first" tabindex="0">first thing</div>
    <div class="second" tabindex="0">second thing</div>
    <div class="third" tabindex="0">third thing</div>
    <div class="fourth" tabindex="0">fourth thing</div>
  </div>

  <p>required space</p>
  <div class="vertical-container">
    <div class="first" tabindex="0">first thing</div>
    <div class="second" tabindex="0">second thing</div>
    <div class="third" tabindex="0">third thing</div>
    <div class="fourth" tabindex="0">fourth thing</div>
  </div>

  <p>less than required space</p>
  <div class="vertical-container" style="height: 20px">
    <div class="first" tabindex="0">first thing</div>
    <div class="second" tabindex="0">second thing</div>
    <div class="third" tabindex="0">third thing</div>
    <div class="fourth" tabindex="0">fourth thing</div>
  </div>


  <h2>Horizontal Scrolling</h2>

  <p>more than required space</p>
  <div class="horizontal-container" style="width: 400px">
    <div class="first" tabindex="0">first thing</div>
    <div class="second" tabindex="0">second thing</div>
    <div class="third" tabindex="0">third thing</div>
    <div class="fourth" tabindex="0">fourth thing</div>
  </div>

  <p>required space</p>
  <div class="horizontal-container">
    <div class="first" tabindex="0">first thing</div>
    <div class="second" tabindex="0">second thing</div>
    <div class="third" tabindex="0">third thing</div>
    <div class="fourth" tabindex="0">fourth thing</div>
  </div>

  <p>less than required space</p>
  <div class="horizontal-container" style="width: 200px">
    <div class="first" tabindex="0">first thing</div>
    <div class="second" tabindex="0">second thing</div>
    <div class="third" tabindex="0">third thing</div>
    <div class="fourth" tabindex="0">fourth thing</div>
  </div>


  <h2>Horizontal And Vertical Scrolling</h2>

  <p>more than required space</p>
  <div class="both-container" style="width: 400px; height: 40px">
    <div class="first" tabindex="0">first thing</div>
    <div class="filler" tabindex="0">filler thing</div>
    <br>
    <div class="filler" tabindex="0">filler thing</div>
    <div class="second" tabindex="0">second thing</div>
    <br>
    <div class="filler" tabindex="0">filler thing</div>
    <div class="third" tabindex="0">third thing</div>
    <br>
    <div class="filler" tabindex="0">filler thing</div>
    <div class="fourth" tabindex="0">fourth thing</div>
  </div>

  <p>required space</p>
  <div class="both-container">
    <div class="first" tabindex="0">first thing</div>
    <div class="filler" tabindex="0">filler thing</div>
    <br>
    <div class="filler" tabindex="0">filler thing</div>
    <div class="second" tabindex="0">second thing</div>
    <br>
    <div class="filler" tabindex="0">filler thing</div>
    <div class="third" tabindex="0">third thing</div>
    <br>
    <div class="filler" tabindex="0">filler thing</div>
    <div class="fourth" tabindex="0">fourth thing</div>
  </div>

  <p>less than required space</p>
  <div class="both-container" style="width: 200px; height: 20px">
    <div class="first" tabindex="0">first thing</div>
    <div class="filler" tabindex="0">filler thing</div>
    <br>
    <div class="filler" tabindex="0">filler thing</div>
    <div class="second" tabindex="0">second thing</div>
    <br>
    <div class="filler" tabindex="0">filler thing</div>
    <div class="third" tabindex="0">third thing</div>
    <br>
    <div class="filler" tabindex="0">filler thing</div>
    <div class="fourth" tabindex="0">fourth thing</div>
  </div>

  <div style="height:100vh"></div>

  <script>
    function scrollIntoView(type) {
      [].forEach.call(document.querySelectorAll('body > div'), function(element, index) {
        element.scrollLeft = 0;
        element.scrollTop = 0;
      });      

      [].forEach.call(document.getElementsByClassName('second'), function(element, index) {
        setTimeout(function() {
          switch (type) {
            case 'needed-true':
            case 'needed-false':
              if (!element.scrollIntoViewIfNeeded) {
                alert('Element.scrollIntoViewIfNeeded() is not supported in this browser!');
                break;
              }

              element.scrollIntoViewIfNeeded(type === '#needed-true');
              break;
            default: 
              element.scrollIntoView(type === 'true');
          }
        }, 1000 * index);
      });
    }

    document.addEventListener('click', function(event) {
      var type = event.target.getAttribute('data-type');
      if (type) {
        scrollIntoView(type);
      }
    }, true);
  </script>

</body>
</html>
